<!doctype html>
<html lang="en">
<head>
	<meta charset="UTF-8" />
	<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
	<title>私募股权-详情</title>
	<link rel="stylesheet" type="text/css" href="../../build/css/base.css"/>
	<link rel="stylesheet" type="text/css" href="../../build/css/style.css">
	<script src="../../build/public/vue.js" charset="utf-8"></script>
	<script src="../../build/public/base.js" charset="utf-8"></script>
	<style>
		.pro-intro{
			padding-bottom: 15px !important;
		}
	</style>
</head>
<body>
	<div id="container" style="padding-bottom:50px;">
		<div class="detail-2-top" style="padding-bottom:10px;">
			<p class="pro-name">{{productInfo.name}}</p>
			<div class="pro-value">
				<span>{{productInfo.apr | formatNum('+','%')}}</span>
				<i>预计年化收益率</i>
			</div>
			<ul class="clear-fix pro-intro">
				<li>
					<span v-if="productInfo.extraTerm > 0 ">{{productInfo.investmentTerm}} + {{productInfo.extraTerm}} {{productInfo.investmentTermUnit | formatUnit}}</span>
					<span v-else>{{productInfo.investmentTerm}} {{productInfo.investmentTermUnit | formatUnit}}</span>
					<i>产品期限</i>
				</li>
				<li @click="showTips = !showTips">
					<span>{{ proDetail.productScale }}</span>
					<div class="pro-intro-span">产品规模</div>
				</li>
				<li>
					<!--<span>{{productInfo.minimumInvestment}}元</span>-->
					<span>{{productInfo.minimumInvestment}}万元</span>
					<i>起购金额</i>
				</li>
			</ul>

		</div>
		<div class="detail-2-list">
			<dl class="active">
				<dt @click="collapse">基本信息<span class="iconfont">&#xe68f;</span></dt>
				<dd class="emptyHandle" style="margin: 0 15px">
					<p>产品名称：<span>{{productInfo.name}}</span></p>
					<p>收 益&nbsp; 率：<span>{{productInfo.apr | | formatPercent }}</span></p>
					<p>发行机构：<span>{{productInfo.issuer}}</span></p>
					<p>产品规模：<span>{{ proDetail.productScale }}</span></p> <!-- productInfo.issuerDetail.assetsUnderManagement -->
					<p>投资期限：<span>{{productInfo.investmentTerm}} {{productInfo.investmentTermUnit | formatUnit}}</span></p>
					<p>投资方式：<span>{{ proDetail.investmentWay  }}</span></p>
					<!--<p>产品投向：<span>{{ proDetail.investmentDirection }}</span></p>-->
					<p>佣金比例：<span v-if="!proDetail.commissionRate">--</span> <span v-else>{{ proDetail.commissionRate | formatPercent }}</span></p>
				</dd>
			</dl>
			<dl>
				<dt @click="collapse">产品亮点<span class="iconfont">&#xe68f;</span></dt>
				<dd style="margin: 0 15px">
					<p>{{proDetail.advantage}}</p>
				</dd>
			</dl>
			<dl>
				<dt @click="collapse">详细资料<span class="iconfont">&#xe68f;</span></dt>
				<dd style="margin: 0 15px">
					<p v-for="item in privateEquityInstruction"><a :href="item.url">{{ item.name }}</a></p>
					<!--<p>常见问题</p>-->
				</dd>
			</dl>
		</div>
		<div class="btn-buttom" style="display: none;">
			<button type="button" class="contact" @click="window.location.href='../mine/planner.html'">立即预约</button>
			<button type="button" class="purchase" @click="showDialog = !showDialog">分享</button>
		</div>
	</div>
<script src="../../build/public/vue-resource.js" charset="utf-8"></script>
<script src="../../build/js/config.js" charset="utf-8"></script>
<script src="../../build/js/common.js" charset="utf-8"></script>
<script type="text/javascript">
	var vm = new Vue({
		el:'#container',
		data:{
			idStr:'',
			proDetail:'',
			productInfo:'',
			privateEquityInstruction:[],
			name:'',
		},
		mounted:function(){
			this.$nextTick(function(){
				vm.idStr = this.getParameter('idStr');
				vm.getDetailData();
			})
		},
		updated:function () {
			this.$nextTick(function(){
				vm.emptyHandle();
			});
		},
		methods:{
			getDetailData:function(callback){										//获取数据
				var url = "/product/privateequity/advisor/detail"//私募股权
				get(url,{productIdStr:vm.idStr},function(res){
					console.log(res.data);
					vm.proDetail = res.data;  //数据赋值
					vm.productInfo = res.data.product;
					vm.privateEquityInstruction = res.data.privateEquityInstruction;
					var len = vm.privateEquityInstruction.length;
					for(var i=0;i<len;i++){
						vm.privateEquityInstruction[i].url = domain + vm.privateEquityInstruction[i].url;
					}
				})
			},
			collapse:function($this){
				var thisMenu = $this.target.nextSibling.nextSibling;
				var isHide = thisMenu.parentNode.classList.contains('active');
				if(isHide){
					thisMenu.parentNode.classList.remove('active');
					thisMenu.style.height = 0;
				}else {
					thisMenu.parentNode.classList.add('active');
					thisMenu.style.height = thisMenu.scrollHeight + 'px';
				}
			},
			getParameter:function(name){
				var reg = new RegExp("(^|&)"+ name +"=([^&]*)(&|$)");
     		var r = window.location.search.substr(1).match(reg);
     		if(r!=null)return  unescape(r[2]); return null;
			},
			emptyHandle:function () {
				var contentLists = document.getElementsByClassName('emptyHandle');
				var contentList1 = contentLists[0].getElementsByTagName('span');
				for(var i=0; i<contentList1.length;i++){
					console.log(contentList1[i].innerHTML);
					if(contentList1[i].innerHTML == ''){
						contentList1[i].innerHTML = '-- ';
					}   // if end
				}   // for end

				var intro = document.getElementsByClassName('pro-intro')[0];
				var intros = intro.getElementsByTagName('span');
				for(var i=0; i<intros.length;i++){
					console.log(intros[i].innerHTML);
					if(intros[i].innerHTML == ''){
						intros[i].innerHTML = '-- ';
					}   // if end
				}   // for end

			}
		}
	})
</script>
</body>
</html>
